import React, {useEffect, useRef, useState} from 'react';
import store from "./store";
import {addGoods} from "./store/slices/goods";

function App(props) {
    const goodsNameRef = useRef();
    const goodsPriceRef = useRef();
    const [goodsList,setGoodsList] = useState(store.getState().goods.goodsList);
    useEffect(()=>{
        store.subscribe(function(){
            setGoodsList(store.getState().goods.goodsList)
        })
    },[])
    return (
        <div>
            <form onSubmit={(e)=>{
                e.preventDefault();
                store.dispatch(addGoods({
                    goodsName:goodsNameRef.current.value.trim(),
                    goodsPrice:goodsPriceRef.current.value.trim()
                }))
            }}>
                <p>商品名称：<input ref={goodsNameRef} type="text"/></p>
                <p>商品价格：<input ref={goodsPriceRef} type="text"/></p>
                <button>提交</button>
            </form>
            <hr/>
            {
                goodsList.map(item=>(
                    <div key={item.id}>
                        <h3>{item.goodsName}|{item.goodsPrice}</h3>
                    </div>
                ))
            }

        </div>
    );
}

export default App;